<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
    
</head>
<body>
    <div id="app">
        <!-- 手动通过v-on来修改我们model(data属性)中的值 -->
        <!-- <input type="text" :value="myValue" @change="updateName"> -->
        <!-- 1.单行文本 -->
        <!-- <input :type="inputType" v-model="myValue" placeholder="请输入你猜"/>
        <button v-on:click="show">anniu</button> -->
        <!-- 2.多行文本 -->
        <!-- <br>
        <textarea v-model="myValue" cols="30" rows="10"></textarea>
        <textarea v-model="myValue" cols="30" rows="10"></textarea>
       <br> -->
       <!-- checkbox -->
       <!-- <input type="checkbox" value="杜建" v-model="checked1">:杜建
       <input type="checkbox" value="路红安" v-model="checked1">:路红安
       <input type="checkbox" value="路红安" v-model="checked1">:张磊 -->
      <!-- radio 单选 -->
      <!-- <input type="radio" value="杜建" name="dj" v-model="checked1"/> 杜建
      <input type="radio" value="杜dao" name="dj" v-model="checked1"/> 杜dao -->
       <!-- select 下拉框  -->
       <Select v-model="selected">
         <Option value="" >请选择</Option>
         <option >A</option>
         <option >B</option>
         <option>C</option>
         <option >D</option>
       </Select>
      {{selected}} 
    </div>
    <script>
       let vm = new Vue({
            el:"#app",
            data() {
                return {
                   inputType:"password",
                   myValue:"",
                   textarea:`你说得多
                   <a href="www.woniuxy.com">
                    
                   `,
                   checked:true,
                   checked1:[],
                   selected:""
                }
            },
            methods: {
                updateName(e){
                    console.log(e.srcElement.value)
                    this.myValue = e.srcElement.value
                },
                show(e){
                    if(this.inputType !="text"){
                        this.inputType = "text"
                    }else{
                        this.inputType = "password"
                    }
                  
                },
                allChoise(){
                    for(let i=0;i<4;i++){
                        this.checked1[i]= !this.checked;
                    }
                }
            },
        });
    </script>
</body>
</html>